<template>
	<view>
		<view class="ding"></view>
		<view class="top-title">
			<view class="iconBox">
				<image src="/static/category/back.png" 
					   mode="aspectFill" 
					   class="img22 img21"
						@click="onClickLeft"></image>
				<text class="shu">|</text>
				<image src="/static/category/back-home.png"
					   mode="aspectFill" 
				       class="img22 img23"
					   @click="onClickHome"></image>
			</view>
			<text class="txt-title">商品详情</text>
		</view>
		<view class="content-box">
			 <swiper class="swiper" 
					 indicator-dots
					 indicator-color="white"
					 indicator-active-color="black"
					 interval="3000"
					 circular
					 autoplay>
					 <block v-for="(item, index) in detailData.imgSrc" :key="index">
						 <swiper-item class="swiper-item">
						 	<view class="item-swiper">
								<image :src="item" mode="aspectFill" class="swiperImg"></image>
							</view>
						 </swiper-item>
					 </block>
			</swiper>
		</view>
		<view class="content-txt">
			<text class="txt2">{{detailData.goodsDetail}}</text>
		</view>
		<!-- 价钱 -->
		<view class="content-money">
			<text class="smallTXT">￥</text>
			<text class="bigTXT">{{detailData.price}}</text>
		</view>
		<!-- 规格 -->
		<view class="content-guige clearfix" @click="changeShow">
			<text class="txt11 left">选择颜色</text>
			<view class="right">
				<block v-for="(item, index) in detailData.guiGeImg" :key="index">
					<image :src="item.imgSrc" mode="aspectFill" class="clothes-img left"></image>
				</block>
				<text class="txt22 left">请选择颜色</text>
				<image src="/static/category/right.png" class="right-img left"></image>
			</view>
		</view>
		<!-- 保障 -->
		<view class="baoZ">
			<image class="bao-z-img" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-ykv1vkf5qdf020b3c1/babbd4c0-6c91-4d6d-8d9f-38ce76ddb344.png" mode="aspectFit"></image>
		</view>
		<!-- pay -->
		<view class="pay">
			<button type="default" class="pay-box" @click="onceShow">立即购买</button>
		</view>
		<view class="ding1"></view>
		<van-popup :show="show"
				  closeable
				  position="bottom"
			      custom-style="height: 80%"
				  class="popup"
				  @close="onClose">
				  <view class="title1 clearfix">
					  <view class="left">
						  <image :src="goodsImg1" mode="aspectFill" class="img1"></image>
					  </view>
					  <view class="left ctxt">
						  <view class="yy">
							  <text class="mini">￥</text>
							  <text class="midd">{{goodsMoney}}</text>
						  </view>
						  <view class="choose">
							  <text class="com">已选</text>
							  <text class="com">{{goodsColor}}</text>
							  <text class="com">{{goodsSize}}</text>
						  </view>
					  </view>
				  </view>
				  <view class="botto">
					  <!-- 颜色 -->
					  <view class="color1">
						  <text>颜色</text>
					  </view>
					  <view>
						  <block v-for="(item, index) in detailData.guiGeImg" :key="index">
								<image :src="item.imgSrc" class="img2" 
										mode="aspectFill" 
										:class="{borderBlack: activeStyle === index}"
										@click="changeBtn(index)"></image>
						  </block>
					  </view>
					  <!-- 大小 -->
					  	<view class="color1 uu">
					  		<text>尺码</text>
					  	</view>
						<view>
						  <block v-for="(item, index) in detailData.chiMa" :key="index">
							 <text class="chi-ma"
								   :class="{borderBlack: activeSize === index}"
								   @click="changeBtn1(index)">
								   {{item}}</text>
						  </block>
						</view>
				  </view>
				  <view class="pay1" v-if="!isNaN(goodsMoney)">
					  <button type="default" class="btn-p" @click="payMoney">
						  <text class="btn-price">￥{{goodsMoney}}</text>
					  </button>
				  </view>
		</van-popup>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				activeStyle: 999,     //款式控件
				activeSize: 999,      //大小控件
				goodsColor: '',  
				goodsSize: '',
				goodsMoney: '--',
				goodsImage: '',
				show: false,
				type: '',
				detailData: {
					imgSrc: ['https://img13.360buyimg.com/n1/jfs/t1/106800/11/17595/119818/5e8c436cE76f7c2c6/da172b96f90c769b.jpg',
							 'https://img13.360buyimg.com/n1/jfs/t1/111666/6/423/110253/5e8c436dE57aff19b/c0db5fa646e6e383.jpg',
							 'https://img13.360buyimg.com/n1/jfs/t1/112875/39/425/114833/5e8c436cE352c59ec/52d456bd2e46fbf5.jpg',
							 'https://img13.360buyimg.com/n1/jfs/t1/104741/4/17706/116974/5e8c436bEf0c22ba0/6218099c59dfd5c1.jpg'
							],
					goodsDetail: "卡帝乐鳄鱼(CARTELO)衬衫男 纯色休闲长袖衬衫舒适透气白衬衣男 1F158101312 白色 XL",
					price: 99,
					guiGeImg: [
						{
							imgSrc: 'https://img10.360buyimg.com/n9/s40x40_jfs/t1/125980/23/16592/115410/5f98d4a6E4fe6e66b/e471fade05767ea8.jpg',
							color: '白色',
							price: '777'
						},
						{
							imgSrc: 'https://img10.360buyimg.com/n9/s40x40_jfs/t1/108060/9/11731/137792/5e8c4316E40602f57/2c03f341399b0b7e.jpg',
							color: '黑色',
							price: '888'
						},
						{
							imgSrc: 'https://img12.360buyimg.com/n9/s40x40_jfs/t1/110422/31/11666/146713/5e8c43b2E6fece517/70c879a05f46d58a.jpg',
							color: '淡蓝色',
							price: '999'
						}
					],
					chiMa: ['S', 'M', 'L', 'XL', 'XXL', '3XL']
				}
			};
		},
		computed: {
			...mapState(['userinfo', 'isLogin']),
			goodsImg() {
				return this.detailData.guiGeImg[0].imgSrc
			},
			//设置初始值
			goodsImg1() {
				return this.goodsImage || this.goodsImg
			}
		},
		onLoad(option) {
			this.type = option.type
		},
		methods:{
			onClickLeft() {
				uni.navigateBack({
					delta: 1
				})
			},
			onClickHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			onClose() {
				this.show = false
			},
			changeBtn(x) {    //颜色函数
				if(this.activeStyle === x) {
					this.activeStyle = 999
					this.goodsMoney = '--'
					this.goodsColor = ''
				} 
				else {
					this.activeStyle = x
					this.goodsColor = this.detailData.guiGeImg[x].color
					this.goodsImage = this.detailData.guiGeImg[x].imgSrc
					if(this.goodsSize) {
						this.goodsMoney = this.detailData.guiGeImg[x].price
					}
				}
			},
			changeBtn1(x) {    //大小函数
				if(this.activeSize === x) {
					this.activeSize = 999
					this.goodsMoney = '--'
					this.goodsSize = ''
				}
				else {
					this.activeSize = x
					this.goodsSize = this.detailData.chiMa[x]
					if(this.goodsColor) {
						this.goodsMoney = this.detailData.guiGeImg[this.activeStyle].price
					}
				}
			},
			// 选择颜色函数
			changeShow() {
				this.show = true
			},
			//里面立即下单
			onceShow() {
				this.show = true
			},
			//下单付款
			payMoney() {
				if(!this.isLogin) {
					uni.navigateTo({
						url: '/pages/login/login?toPath=detail'
					})
				}
				else {
					let obj = {
						imgUrl: this.goodsImage,
						money: this.goodsMoney,
						color: this.goodsColor,
						size: this.goodsSize,
						detail: this.detailData.goodsDetail
					}
					uni.setStorageSync('goodsInfo', JSON.stringify(obj))
					uni.navigateTo({
						url: '/pages/commitOrder/commitOrder'
					})
				}
			}
		},
		mounted() {
			
		}
	}
</script>

<style lang="scss" scoped>
	.ding {
		position: fixed;
		width: $uni-width;
		top: 0;
		height: 130rpx;
		background-color: #f8f8f8;
		z-index: 12;
	}
	.top-title {
		position: fixed;
		width: $uni-width;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		padding-top: 160rpx;
		padding-bottom: 20rpx;
		background-color: white;
		z-index: 10;
		.txt-title {
			font-size: 40rpx;
			font-weight: 600;
		}
		.iconBox {
			position: absolute;
			width: 150rpx;
			height: 50rpx;
			text-align: center;
			top: 212rpx;
			transform: translateY(-50%);
			line-height: 50rpx;
			margin-left: 30rpx;
			border: 2rpx solid #dddddd;
			border-radius: 30rpx;
			.shu {
				color: #dddddd;
			}
			.img21 {
				margin-right: 6rpx;
			}
			.img22 {
				width: 40rpx;
				height: 40rpx;
				vertical-align: middle;
			}
			.img23 {
				margin-left: 10rpx;
			}
		}
		
	}
	.swiper {
		margin-top: 263rpx;
		width: $uni-width;
		height: 600rpx;
	}
	.content-box {
		width: $uni-width;
		padding: 30rpx;
		box-sizing: border-box;
	}
	.swiperImg {
		width: $uni-width - 60rpx;
		height: 600rpx;
	}
	.content-txt {
		padding: 30rpx;
		box-sizing: border-box;
		text-align: center;
		.txt2 {
			letter-spacing: 1rpx;
			font-size: 32rpx;
		}
	}
	.content-money {
		text-align: center;
		padding-bottom: 30rpx;
		border-bottom: 2rpx solid #dddddd;
		.smallTXT {
			font-size: 30rpx;
		}
		.bigTXT {
			font-size: 45rpx;
		}
	}
	.content-guige {
		padding: 30rpx;
		height: 140rpx;
		box-sizing: border-box;
		line-height: 80rpx;
		border-bottom: 2rpx solid #dddddd;
		.clothes-img {
			width: 80rpx;
			height: 80rpx;
			vertical-align: middle;
			margin-right: 10rpx;
		} 
		.right-img {
			width: 40rpx;
			height: 40rpx;
			margin-left: 4rpx;
			margin-top: 23rpx;
			vertical-align: middle;
		}
		.txt11, .txt22 {
			font-size: 32rpx;
			letter-spacing: 1rpx;
		}
		.txt11 {
			color: #b5b5b5;
		}
	}
	.baoZ {
		position: relative;
		width: $uni-width;
		padding: 30rpx;
		height: 120rpx;
		box-sizing: border-box;
		border-bottom: 2rpx solid #dddddd;
		.bao-z-img {
			width: 700rpx;
			height: 70rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	
	}
	.pay {
		position: fixed;
		bottom: 0;
		width: $uni-width;
		padding: 20rpx 10rpx;
		background-color: white;
		box-sizing: border-box;
		.pay-box {
			width: 730rpx;
			background-color: #00cccb;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-radius: 0;
		}
		}
	.ding1 {
		height: 120rpx;
		background-color: white;
	}
	.popup {
		position: relative;
		.title1 {
			padding: 20rpx 30rpx;
			box-sizing: border-box;
		}
		.yy {
			margin-top: 10rpx;
		}
		.img1 {
			width: 160rpx;
			height: 160rpx;
		}
		.ctxt {
			margin-left: 20rpx;
		}
		.mini {
			font-size: 30rpx;
		}
		.midd {
			font-size: 48rpx;
		}
		.choose {
			margin-top: 20rpx;
		}
		.com {
			margin-right: 10rpx;
			font-size: 30rpx;
			color: #959595;
		}
		.botto {
			width: $uni-width;
			background-color: #f8f8f8;
			// background-color: red;
			height: 850rpx;
			padding: 20rpx 30rpx;
			box-sizing: border-box; 
			.color1 {
				font-weight: 500;
				font-size: 38rpx;
				margin-bottom: 20rpx;
			}
			.chi-ma {
				display: inline-block;
				width: 100rpx;
				height: 100rpx;
				line-height: 110rpx;
				background-color: white;
				border: 2rpx solid #bfbfbf;
				text-align: center;
				margin-right: 10rpx;
			}
			.borderBlack {
				border: 3rpx solid red;
			}
			.uu {
				margin-top: 20rpx;
			}
			
		}
		.pay1 {
				position: absolute;
				bottom: 0;
				height: 140rpx;
				background-color: white;
				width: $uni-width;
				padding: 20rpx 20rpx 40rpx;
				box-sizing: border-box;
				.btn-p {
					width: 690rpx;
					background-color: #01c2c3;
					height: 90rpx;
					line-height: 80rpx;
					text-align: center;
					border-radius: 0;
					color: white;
				}
				.btn-price {
					font-size: 40rpx;
				}
				.btn-song {
					display: inline-block;
					font-size: 30rpx;
					margin-left: 20rpx;
					margin-top: -8rpx;
					font-weight: 500;
				}
			}
		.img2 {
			width: 110rpx;
			height: 110rpx;
			margin-right: 20rpx;
		}
		.borderBlack {
			border: 3rpx solid red;
		}
	}
	
</style>
